<template>
  <div class="service">
     <Tabs v-model="tabname">
        <TabPane label="报修列表" name="name1">
          <Table stripe :columns="columns1" :data="data1">
            <template slot-scope="{ row, index }" slot="action">
              <Icon type="ios-paper c1" size="20" @click="gotoDetail(row)" />
              <Icon type="ios-create c5" size="20" />
            </template>
          </Table>
        </TabPane>
        <TabPane label="已完成报修" name="name2">
          <Table stripe :columns="columns1" :data="data1">
            <template slot-scope="{ row, index }" slot="action">
              <Icon type="ios-paper c1" size="20" @click="gotoDetail(row)" />
            </template>
          </Table>
        </TabPane>
        <TabPane label="技术人员" name="name3">
           <Table stripe :columns="columns2" :data="data1">
            <template slot-scope="{ row, index }" slot="action">
              <Icon type="ios-create c5" size="20" @click="gotoDetail(row)" />
              <Icon type="ios-trash c7" size="20" @click="gotoDetail(row)" />
            </template>
          </Table>
        </TabPane>
        <TabPane label="维修热线" name="name4">
          <Table stripe :columns="columns4" :data="data1">
            <template slot-scope="{ row, index }" slot="action">
              <Icon type="ios-create c5" size="20"  />
              <Icon type="ios-trash c7" size="20" />
            </template>
            <template slot-scope="{ row, index }" slot="enable">
              <i-switch  v-model="switch1" />
          </template> 
          </Table>

        </TabPane>
        <Button v-show="tabname == 'name3'" type="warning" @click="handleTabsAdd" size="small" slot="extra"> + 增加技术人员</Button>
    </Tabs>

    <!-- modalAdd -->
    <Modal v-model="modalAdd" title="新增技术人员" footer-hide width="400">
      <Form ref="meetingForm" :model="meetingForm"  class="mt20" :labelWidth="100">
        <FormItem label="姓名:" prop="name" required>
          <Input type="text" v-model="meetingForm.name" placeholder="请输入名称"></Input>
        </FormItem>
        <FormItem label="手机号:" prop="name" required>
          <Input type="text" v-model="meetingForm.name" placeholder="请输入手机号"></Input>
        </FormItem>
        
        
        <FormItem label="技术类型" prop="password">
            <Select v-model="meetingForm.type">
              <Option value="1">软件</Option>
              <Option value="2">硬件</Option>
            </Select>
        </FormItem>

         <FormItem label="技术等级" prop="password">
            <Select v-model="meetingForm.level">
              <Option value="1">一级</Option>
              <Option value="2">二级</Option>
              <Option value="3">三级</Option>
            </Select>
        </FormItem>

        <FormItem>
          <Button type="primary"   @click="handleSubmit('meetingForm')" style="width:200px;">确认</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tabname: 'name1',
        modalAdd: false,
        switch1: false,
        position:[
          {title: '代理商管理', link:'/admin/agent'},
          {title: '售后服务'},
        ],
        meetingForm:{
          name: '',
          type: '1',
          level:'1'
        },
        columns1: [{
            title: '序号',
            key: 'id'
          },
          {
            title: '使用单位名称',
            key: 'address'
          },
          {
            title: '购买产品',
            key: 'address'
          },
          {
            title: '报修时间',
            key: 'address'
          },
          {
            title: '报修内容',
            key: 'address'
          },
          {
            title: '修复时间',
            key: 'address'
          },
          {
            title: '技术人员姓名',
            key: 'address'
          },
          {
            title: '联系手机',
            key: 'address'
          },
          {
            title: '状态',
            key: 'address'
          },
          {
            title: '操作',
            slot: 'action',
            width: 180,
            align: 'center'
          },
        ],
        columns2: [{
            title: '序号',
            key: 'id'
          },
          {
            title: '技术人员姓名',
            key: 'address'
          },
          {
            title: '联系手机',
            key: 'address'
          },
          {
            title: '技术类型',
            key: 'address'
          },
          {
            title: '技术等级',
            key: 'address'
          },
          {
            title: '操作',
            slot: 'action',
            width: '120'
          },
        ],
        columns4:[
          {
            title: '序号',
            key: 'id'
          },
          {
            title: '报修电话',
            key: 'id'
          },
          {
            title: '联系人',
            key: 'id'
          },
          {
            title: '状态',
            key: 'id'
          },
          {
            title: '启用',
            slot: 'enable'
          },
          {
            title: '操作',
            slot: 'action'
          },
          
          
        ],
        data1: [{
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          
        
        ]
      }
    },
    mounted () {
      this.$store.commit('UPDATE_POSITION', this.position)
    },
    methods:{
      handleTabsAdd () {
        this.modalAdd = true
      },
      gotoDetail(row) {
        this.$router.push('serviceDetail')
      },
      handleSubmit (form) {
        
      }
    }
  }
</script>

<style>
</style>
